<template>
    <div class="navigation-container">
        <el-menu :default-active="$route.path" :collapse="true" :router="true">
            <template v-for="item in $store.state.options.navigation">
                <el-submenu v-if="item.children.length > 0" :key="item.path" :index="item.path">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="itemx in item.children" :key="itemx.path" :index="itemx.path">
                        {{ itemx.name }}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :key="item.path" :index="item.path">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<style lang="scss">
</style>

<script>
    import { Menu, Submenu, MenuItem, MenuItemGroup, Tooltip } from "element-ui";

    export default {
        name: "Navigation",
        components: {
            [Menu.name]: Menu,
            [Submenu.name]: Submenu,
            [MenuItem.name]: MenuItem,
            [MenuItemGroup.name]: MenuItemGroup,
            [Tooltip.name]: Tooltip
        }
    };
</script>
